/**
  * 单位调离
 */

<template lang='pug'>
  Modal(v-model="show" title="单位调离" :closable="false" :mask-closable="false")
    Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="125")
      FormItem(label="调离单位：")
        .pt-3 {{customerNames}}
      FormItem(label="调离客服：" prop="serverId")
        Select.input-has-border(v-model="formValidate.serverId" placeholder="请选择所属客服" :label-in-value="true" filterable @on-change="serverIdChange" style="width:100%")
          Option(v-for="(item, index) in serverId_arr" :value="item.key" :key="index") {{ item.value }}
    template(slot="footer")
      Button(@click="cancel") 取消
      Button(type="info" :loading="loading" @click="handleSubmit('formValidate')") 确定
</template>

<script>
import dataApi from '@/api/data.js'

export default {
  name: "exchange",
  props: {
    show: false,
    customerIds: String,
    customerNames: String,
    serverId_arr: Array
  },
  data() {
    return {
      loading: false,
      formValidate: {
        serverId: '', // 客服id
        serverName: ''
      },
      ruleValidate: {
        serverId: [
          { required: true, message: '请选择调离的客服', trigger: 'change' }
        ]
      }
    }
  },

  computed: {},

  mounted() {},

  methods: {

    // 单位调离客服选择
    serverIdChange (val) {
      if (val) {
        this.formValidate.serverName = val.label
      } else {
        this.formValidate.serverName = ''
      }
    },
    cancel () {
      this.$emit('on-cancel')
    },
    
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          dataApi.postReassignServer({
            CustomerIds: this.customerIds,
            ServerId: this.formValidate.serverId,
            ServerName: this.formValidate.serverName
          }).then((res) => {
            this.loading = false
            if (res.data.success) {
              this.$Message.success('操作成功！')
              this.$refs['formValidate'].resetFields();
              this.$emit('get-list')
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        } else {
        }
      })
    }
  },

  watch: {

  }
};
</script>
<style lang='less' scoped>
.d-f-c{
  display: flex;
  align-items: flex-start;
  span{
    display: inline-block;
    width: 125px;
    padding-right: 12px;
  }
  .content{
    flex: 1;
  }
}
</style>